import type { Meta, StoryObj } from "@storybook/react-webpack5";
import React from "react";
import { Upload } from "./upload";
import { Button, ButtonType, ButtonSize } from "../Button/button";
import { Icon } from "../Icon/icon";
import { faUpload } from "@fortawesome/free-solid-svg-icons";

/**
 * Upload 组件的 Storybook 元数据配置
 * 定义了组件在 Storybook 中的基本信息和交互控件
 */
const meta = {
  title: "Components/Upload", // 组件在 Storybook 侧边栏中的显示路径
  component: Upload, // 关联的 React 组件
  parameters: {
    layout: "centered", // 布局方式：居中显示
  },
  tags: ["autodocs"], // 自动生成文档标签
  argTypes: {
    // 上传地址控件配置
    action: {
      control: "text", // 使用文本输入控件
      description: "上传接口地址", // 控件描述
    },
    // 文件字段名控件配置
    name: {
      control: "text", // 使用文本输入控件
      description: "文件字段名", // 控件描述
    },
    // 多文件上传控件配置
    multiple: {
      control: "boolean", // 使用布尔值开关控件
      description: "是否支持多文件上传", // 控件描述
    },
    // 拖拽上传控件配置
    drag: {
      control: "boolean", // 使用布尔值开关控件
      description: "是否启用拖拽上传", // 控件描述
    },
    // 接受的文件类型控件配置
    accept: {
      control: "text", // 使用文本输入控件
      description: "接受的文件类型", // 控件描述
    },
  },
} satisfies Meta<typeof Upload>;

export default meta;

/**
 * Story 类型定义
 * 基于元数据生成的 Story 类型，用于类型安全的 Story 定义
 */
type Story = StoryObj<typeof meta>;

/**
 * 基础上传示例
 *
 * 展示最基本的文件上传功能，用户点击按钮选择文件进行上传。
 */
export const Default: Story = {
  name: "基础上传", // 中文翻译名称
  args: {
    action: "https://www.mocky.io/v2/5cc8019d300000980a055e76", // 上传接口地址
    name: "file", // 文件字段名
  },
  render: (args) => (
    <Upload {...args}>
      {/* 上传按钮 */}
      <Button size={ButtonSize.lg} btnType={ButtonType.primary}>
        <Icon icon={faUpload} /> 点击上传
      </Button>
    </Upload>
  ),
};

/**
 * 文件大小检查示例
 *
 * 展示如何在上传前进行文件大小验证，超过限制的文件将被拒绝。
 */
export const WithSizeCheck: Story = {
  name: "文件大小检查", // 中文翻译名称
  args: {
    action: "https://www.mocky.io/v2/5cc8019d300000980a055e76", // 上传接口地址
    name: "file", // 文件字段名
  },
  render: (args) => {
    // 文件大小检查函数
    const checkFileSize = (file: File) => {
      if (file.size / 1024 > 50) {
        alert("文件过大");
        return false;
      }
      return true;
    };

    return (
      <Upload
        {...args}
        beforeUpload={checkFileSize} // 设置前置检查函数
      >
        <Button size={ButtonSize.lg} btnType={ButtonType.primary}>
          <Icon icon={faUpload} /> 点击上传（文件大小限制 50KB）
        </Button>
      </Upload>
    );
  },
};

/**
 * 拖拽上传示例
 *
 * 展示拖拽上传功能，用户可以直接将文件拖拽到上传区域进行上传。
 */
export const DragUpload: Story = {
  name: "拖拽上传", // 中文翻译名称
  args: {
    action: "https://www.mocky.io/v2/5cc8019d300000980a055e76", // 上传接口地址
    name: "fileName", // 文件字段名
    multiple: true, // 支持多文件上传
    drag: true, // 启用拖拽功能
  },
  render: (args) => (
    <Upload {...args}>
      <Icon icon={faUpload} size="5xl" color="#6c757d" />
      <br />
      <p>点击或者拖动到此区域进行上传</p>
    </Upload>
  ),
};
